import AvatarCard from "@/components/avatarCard"
import { View, Text, Image } from "@tarojs/components"
import "./index.scss"
import Taro from "@tarojs/taro"

import "taro-ui/dist/style/components/icon.scss";

function PetMoment({
  userAvatar,
  userName,
  agoTime,
  content,
  images,
  onAction,
}: PetMomentItem) {

  const handlePreviewImage = (index: number) => {
    Taro.previewImage({
      current: images[index],
      urls: images,
    })
  }

  const handleAction = () => {
    onAction && onAction();
  }

  const renderImages = images ? images.map((item, index) => {
    return (
      <View className="moment-image-wrap flex-c-c-c" key={index} onClick={() => handlePreviewImage(index)}>
        <Image className="moment-image" src={item} mode="aspectFill" webp />
      </View>
    )
  }) : null;
  
  return (
    <View className="moment-item">
      <View className="flex-b-c">
        <AvatarCard avatar={userAvatar} username={userName} descInfo={agoTime} avatarSize="small" />
        <View className='at-icon at-icon-chevron-down' onClick={() => handleAction()}></View>
      </View>
      <View className="moment-content">
        <View className="moment-text-box">
          <Text className="moment-text">{ content }</Text>
        </View>
        {/* <View className="moment-tags">
          <Text className="tag">#柴犬</Text>
          <Text className="tag">#周末活动</Text>
        </View> */}
        <View className="moment-images">
          {renderImages}
        </View>
      </View>
    </View>
  )
}

export default PetMoment